<template>
    <div class="modal-iframe">
        <!-- PC端弹窗 -->
        <a-modal v-model:open="open" width="50%" :title="props.title ? props.title : ''" @ok="handleOk"
            :body-style="modalBodyStylePc" :mask-closable="false" destroy-on-close wrap-class-name="pc-full-modal"
            v-if="windowsWidthTypeRef == 'pc'">
            <template #footer>
                <a-button key="submit" type="primary" @click="handleOk">关闭</a-button>
            </template>
            <div v-if="props.type === 'my_order_list'">
                <MyOrderList :donationId="props.paramsInt" />
            </div>
        </a-modal>

        <!-- 手机端弹窗 -->
        <a-modal v-model:open="open" :closable="false" :mask-closable="false" destroy-on-close title="" width="100%"
            wrap-class-name="mobile-full-modal" :footer="null" @ok="handleOk" v-if="windowsWidthTypeRef == 'mobile'">
            <div class="mobile_content_header">
                <img class="to_left_icon" src="@/assets/img/to_left_jiantou.png" alt="close" @click="handleOk">
                <div class="title">{{ props.title ? props.title : '' }}</div>
            </div>
            <div v-if="props.type === 'my_order_list'">
                <MyOrderList :donationId="props.paramsInt" />
            </div>
        </a-modal>
    </div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';
import MyOrderList from '@/views/web/my/order/list.vue';   //实际显示数据的组件
const props = defineProps({
    type: {
        type: String,
        required: true
    },  // 弹窗类型（donation、order等）
    title: {
        type: String,
        default: ''
    },  // 弹窗标题
    paramsInt: {
        type: Number,
        default: 0
    },  // 弹窗参数（int类型）
    paramsString: {
        type: String,
        default: ''
    },  // 弹窗参数（string类型）
})

const open = defineModel('isOpen');  // 弹窗显示状态（是否打开弹窗）

// 弹窗自定义样式
const modalBodyStylePc = ref({ height: '70vh', 'max-height': '70vh', 'min-height': '200rem', 'overflow-y': 'auto', 'margin-top': '24rem', 'padding-right': '20rem' });

// 关闭弹窗
const handleOk = () => {
    open.value = false;
};

// 引入获取宽度，宽度类型方法
import { useWindowsWidth } from '@/store/windowsWidth.js';
const { windowsWidthType, windowsWidth } = useWindowsWidth();
const windowsWidthTypeRef = ref('pc');
// 当浏览器宽度类型值改变时触发
watch([windowsWidthType], async ([newwindowsWidthType], [oldwindowsWidthType]) => {
    if (newwindowsWidthType != oldwindowsWidthType) {
        windowsWidthTypeRef.value = newwindowsWidthType;
    }
});
onMounted(() => {
    windowsWidthTypeRef.value = windowsWidthType.value;
});

</script>
<style lang="less">
// PC端弹窗样式
.pc-full-modal {
    .ant-modal {
        .ant-modal-header {
            height: 24rem;
            line-height: 24rem;

            .ant-modal-title {
                font-size: 16rem;
            }
        }

        .ant-modal-content {
            border-radius: 8rem;
            padding: 20rem 24rem;
        }

        .ant-modal-close {
            top: 17rem;
            inset-inline-end: 17rem;
            border-radius: 4rem;
            width: 22rem;
            height: 22rem;

            .ant-modal-close-x {
                font-size: 16rem;
                line-height: 22rem;
            }
        }

        .ant-modal-footer {
            margin-top: 12rem;

            .ant-btn {
                font-size: 14rem;
                height: 32rem;
                padding: 4rem 15rem;
                border-radius: 6rem;
                box-shadow: 0 2rem 0 rgba(5, 145, 255, 0.1);
            }
        }
    }
}

// 移动端弹窗样式
.mobile-full-modal {
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;

        .ant-modal-content {
            display: flex;
            flex-direction: column;
            height: calc(100vh);
            border-radius: 0;

            .ant-modal-body {
                flex: 1;
                overflow-y: auto;
            }
        }
    }

    .mobile_content_header {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30rem;

        .to_left_icon {
            position: absolute;
            left: 0;
            top: 0;
            width: 16rem;
            height: 16rem;
        }

        .title {
            height: 16rem;
            line-height: 24rem;
            font-weight: 600;
            font-size: 16rem;
            text-align: center;
        }
    }
}
</style>